<template>
  <div class="banner-box" v-if="bannerList.length > 0">
    <van-swipe
      @change="onChange"
      :show-indicators="false"
      :style="'height:' + swipeHeight + ';width:' + swipeWidth"
      :autoplay="3000"
    >
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <div
          class="banner-bg"
          :style="'background-image:url('+item.image+')'"
        ></div>
        <div class="banner-wrap"></div>
        <div class="book-box" @click="handleToRead(item.id)">
          <div class="book-detail">
            <div class="book-info">
              <div class="book-name">{{item.name}}</div>
              <div class="book-writer">{{item.writer}}著</div>
              <div class="book-new van-ellipsis">
                最新
                <br />
                {{item.new_chapter}}
              </div>
            </div>
            <van-image :src="item.image" class="book-img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="book-bottom">
            <div class="book-other">
              <span class="book-over">{{item.is_over}}</span>
              <span class="book-line"></span>
              <span class="book-type">{{item.type}}</span>
            </div>
            <span class="book-index">{{current + 1}}/{{bannerList.length}}</span>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  name: "Banner",
  data() {
    return {
      current: 0,
    };
  },
  props: {
    type: Number,
    bannerList:{
      default:[],
      type:[Array,Object]
    }
  },
  computed: {
    swipeHeight: function () {
      return Taro.pxTransform(278, 750);
    },
    swipeWidth: function () {
      return Taro.pxTransform(670, 750);
    },
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    handleToRead(id) {
      Taro.navigateTo({
        url: `/pages/bookdetail/bookdetail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped>
.banner-box {
  margin: 52px auto;
  margin-bottom: 97px;
  border-radius: 16px;
  box-shadow: 0px 17px 46px 0px rgba(6, 27, 65, 0.16);
  width: 670px;
}
.banner-bg {
  height: 278px;
  background-repeat: no-repeat;
  background-size: 670px 278px;
  filter: blur(20px);
  border-radius: 16px;
  opacity: 0.85;
}
.banner-wrap {
  height: 278px;
  position: relative;
  bottom: 278px;
  left: 0;
  background: #00266b;
  opacity: 0.3;
  border-radius: 16px;
}
.book-box {
  height: 278px;
  position: relative;
  bottom: 556px;
  opacity: 0.85;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.book-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 32px 0px 20px 0px;
  margin: 0 30px 0 30px;
  border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
}
.book-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.book-name {
  font-size: 36px;
  line-height: 36px;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}
.book-writer {
  font-size: 18px;
  line-height: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.851);
  margin-top: 9px;
  margin-left: 2px;
}
.book-new {
  width: 400px;
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  line-height: 36px;
  margin-top: 18px;
  margin-left: 2px;
}
.book-img {
  width: 114px;
  height: 152px;
  border-radius: 12px;
}
.book-bottom {
  display: flex;
  padding: 24px 36px 0px 30px;
  align-items: center;
  justify-content: space-between;
}
.book-other {
  display: flex;
  align-items: center;
}
.book-over {
  font-size: 18px;
  line-height: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.65);
}
.book-line {
  float: left;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 1px;
  margin: 0 16px;
}
.book-type {
  font-size: 18px;
  line-height: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.65);
}
.book-index {
  font-size: 22px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.65);
  line-height: 30px;
}
</style>

